import React, { useState, useEffect } from 'react';
import { Input, Button, Form, Pagination, Empty, Avatar } from "antd";
import styles from "./index.less";
import { connect, history } from 'umi';
import { Icon } from '@ant-design/compatible';
import { doFetch } from "@/utils/doFetch";
import SectionTitle from '@/components/SectionTitle';
import moment from "moment";
import ShowWay from "@/components/Showway";



const Products = (props) => {
    const { showWay, children } = props;

    const [prod, cprod] = useState([]),
        [total, ct] = useState(1),
        [params, cparams] = useState({
            status: 1,
            pageIndex: 1,
            pageSize: 10
        })

    useEffect(() => {
        doFetch({ url: "/ngic-promote-product/umProduct/queryPage", params: params }).then(res => {
            cprod(res?.data?.page?.list || [])
            ct(res?.data?.page?.total)
        })
    }, [params])

    return (
        <div>
            <div className="content">
                <SectionTitle
                    extra={
                        <ShowWay />
                    }
                    size="large"
                >
                    所有产品
                </SectionTitle>
            </div>
            <div className={styles.productList}>
                {
                    showWay == "square" ?
                        <div className="ulBox">
                            <div style={{ width: 1200, margin: "0 auto" }}>
                                <ul style={{ overflow: "hidden", width: 1215 }}>
                                    {
                                        prod.map(it => {
                                            return <li key={it.id} className="liItem">
                                                <div className="liDiv">
                                                    <img className="liImg" src={it.productImageUrlList && it.productImageUrlList.length ? it.productImageUrlList[0].url : require("@/assets/default.png")} />
                                                    <div className="liText">
                                                        <div style={{ color: `${it.isDiscuss == 1 ? "#bbb" : "#ff4800"}`, fontWeight: 500, marginBottom: 5 }}>{it.isDiscuss == 1 ? "面议" : `￥${it.minPrice} ~ ￥ ${it.maxPrice}`}</div>
                                                        <div className="description" title={it.productName}>{it.productName}</div>
                                                        <div className="bottomText" style={{ display: "flex", justifyContent: "space-between" }}>
                                                            <div style={{ display: "flex", alignItems: "center" }}>
                                                                <Icon type="ordered-list" style={{ fontSize: 12, marginRight: 5, color: "#ff4800" }} />
                                                                <div className="oneLine" title={it.companyName}>{it.companyName}</div>
                                                            </div>
                                                            <div className="oneline" title={`${it.provinceName} ${it.cityName}`}>{`${it.provinceName} ${it.cityName}`}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        })
                                    }
                                </ul>
                            </div>
                        </div>
                        :
                        <ul className="content" style={{ overflow: "hidden" }}>
                            {
                                prod.map(it => {
                                    return <li key={it.id} className={styles.liItemRow}>
                                        <div className={styles.liDivRow}>
                                            <div className={styles.leftContent}>
                                                <img className={styles.liImgRow} src={it.productImageUrlList && it.productImageUrlList.length ? it.productImageUrlList[0].url : require("@/assets/default.png")} />
                                                <div className={styles.descriptionRow} title={it.productName}>{it.productName}</div>
                                            </div>
                                            <div className={styles.rightConetnt}>
                                                <div style={{ color: `${it.isDiscuss == 1 ? "#bbb" : "#ff4800"}`, fontWeight: 500, marginRight: 30 }}>{it.isDiscuss == 1 ? "面议" : `￥${it.minPrice} ~ ￥ ${it.maxPrice}`}</div>
                                                <Icon type={it.icon} style={{ fontSize: 12, marginRight: 5, color: "#ff4800" }} />
                                                <div className={styles.oneLine} title={it.companyName} style={{ marginRight: 20 }}>{it.companyName}</div>
                                                <div style={{ width: 120 }} className="oneline" title={`${it.provinceName} ${it.cityName}`}>{`${it.provinceName} ${it.cityName}`}</div>
                                            </div>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                }


                <div className={`${styles.page} content rowcenter`} style={{ marginTop: 16 }}>
                    <Pagination
                        size="small"
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        showTotal={total => `共 ${total} 条`}
                        onChange={(page, pageSize) => {
                            cparams({
                                ...params,
                                pageSize,
                                pageIndex: page
                            })
                        }}
                        pageSize={params.pageSize}
                        current={params.pageIndex}
                    />
                </div>
            </div>
        </div>
    )
}

export default connect(({ global }) => ({
    showWay: global.showWay
}))(Products);